import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import api from '@/http/api'
// import localApi from '@/http/localHttp'
// import tipMessage from "@/utils/tipMessage"
import "./style/global.scss"
import './assets/iconfont/iconfont.css'
import './assets/font/font.css'

/**
 * 格式化时间
 */
import moment from 'moment';
import 'moment/dist/locale/zh-cn'
/**
 * element-plus
 */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
/**
 * echarts
 */
import echarts from 'vue-echarts'
import {use} from "echarts/core"
import {CanvasRenderer} from "echarts/renderers"
import {BarChart, PieChart, ScatterChart, PictorialBarChart, LineChart, GaugeChart} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent,
  ToolboxComponent,
  GraphicComponent
} from 'echarts/components'
use([
  CanvasRenderer,
  BarChart,
  PieChart,
  ScatterChart,
  PictorialBarChart,
  LineChart,
  GaugeChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  DataZoomComponent,
  ToolboxComponent,
  GraphicComponent
])
// Highcharts
import HighchartsMore from "highcharts/highcharts-more"
import Highchart from "highcharts/highcharts"
HighchartsMore(Highchart);
//进行动态路由注册
store.commit('userMessage/updateRouteList')

const app = createApp(App).use(store).use(router);
// app.config.globalProperties.$http = api;
// app.config.globalProperties.$localHttp = localApi;
// app.config.globalProperties.$tipMessage = tipMessage;
app.config.globalProperties.$moment = moment;
app.config.globalProperties.$moment.locale("zh-cn");
app.use(ElementPlus, {locale: zhCn});
app.component('v-echarts', echarts);
app.mount('#app')
// 自定义可移动指令
app.directive('drag', {
  mounted(el, binding) {
    const dragBox = el;
    const parentDom = dragBox.parentNode;
    // 父元素宽高
    const pw = parentDom.offsetWidth;
    const ph = parentDom.offsetHeight;
    // 本身宽高
    const sw = dragBox.offsetWidth;
    const sh = dragBox.offsetHeight;
    // 计算得到最大移动距离
    const maxw = pw - sw;
    const maxh = ph - sh;
    const minw = 0;
    const minh = 0;
    el.onmousedown = (ev) => {
      // 鼠标按下的位置
      const mouseXStart = ev.clientX;
      const mouseYStart = ev.clientY;
      // 当前滑块位置
      const rectLeft = el.offsetLeft;
      const rectTop = el.offsetTop;
      // el.style["z-index"] = zIndex++;
      document.onmousemove = (e) => {
        // 鼠标移动的位置
        el.style.cursor = 'move'
        let mouseXEnd = e.clientX;
        let mouseYEnd = e.clientY;
        let moveX = mouseXEnd - mouseXStart + rectLeft;
        let moveY = mouseYEnd - mouseYStart + rectTop;
        // 限制移动范围不能超出父盒子
        if (moveX < minw) {
          moveX = 0;
        }
        if (moveY < minh) {
          moveY = 0;
        }
        if (moveX > maxw) {
          moveX = maxw;
        }
        if (moveY > maxh) {
          moveY = maxh;
        }
        el.style["top"] = moveY + "px";
        el.style["left"] = moveX + "px";
      };
      document.onmouseup = () => {
        // 取消事件
        el.style.cursor = 'default'
        document.onmousemove = null;
      };
    };
  }
})